<!-- 
    @author 带只拖鞋去流浪
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>command</title>
    <style>
        html,
        body,
        #app {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #000;
            color: #F7EED6;
        }

        #app {
            overflow-y: scroll;
            padding: 1rem;
            height: calc(100% - 2rem);
            width: calc(100% - 2rem);
        }

        #ipt {
            border: none;
            outline: none;
            padding: 0;
            margin: 1rem 0;
            width: 100%;
            background-color: transparent;
            /* 光标颜色 */
            caret-color: #F7EED6;
            color: #F7EED6;
            /* 右下角 */
            resize: none;
            font-size: 1.5rem;
            font-family: "MicroSoft Yahei";
            font-weight: 300;
        }

        .res {
            word-wrap: break-word;
            font-size: 1rem;
            font-family: "MicroSoft Yahei";
            font-weight: 300;
        }

        .cmd {
            word-wrap: break-word;
            font-size: 1.5rem;
            margin: 1rem 0;
            font-family: "MicroSoft Yahei";
            font-weight: 300;
        }

        .error {
            color: #f00;
        }
    </style>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <textarea id="ipt" autofocus></textarea>
    </div>

    <script>
        const app = document.getElementById('app');
        const ipt = document.getElementById('ipt');
        const localCommand = ['cls'];

        ipt.addEventListener('keydown', keydownEnter);

        async function keydownEnter(event) {
            if (event.keyCode === 13) {

                const cmd = ipt.value;
                const {
                    str,
                    flag
                } = await doingCommand(cmd);
                ipt.value = '';
                const div = document.createElement('div');
                const resDiv = div.cloneNode();
                resDiv.classList.add('res');
                if (!flag) resDiv.classList.add('error');
                resDiv.innerText = str;

                div.innerHTML = `
                        <div class="cmd">${cmd}</div>
                `;
                div.appendChild(resDiv);

                app.insertBefore(div, ipt);

                // 自动滚动到页面最下边
                app.scrollTop = app.scrollHeight;


            } else {
                // textarea 高度自适应
                ipt.style.height = 'auto';
                const height = ipt.scrollHeight;
                ipt.style.height = `${height}px`;
            }
        }

        async function doingCommand(cmd) {
            let obj = {}
            try {
                const res = await axios({
                    method: 'get',
                    url: '/command',
                    params: {
                        cmd
                    }
                });
                const {
                    str,
                    flag
                } = res.data;
                obj.str = str;
                obj.flag = flag;
            } catch (error) {}
            return obj;
        }
    </script>
</body>

</html>